<template>
  <div class="we_btn_editor">
    <el-form label-width="40px">
      <el-form-item label="文字">
        <el-input v-model="data.content"></el-input>
      </el-form-item>
      <el-form-item label="行为">
        <el-radio-group v-model="data.action">
          <el-radio label="link">跳转到网页</el-radio>
          <el-radio label="wepage">跳转到微页面</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-input v-model="url" v-if="data.action==='link'" placeholder="http://"></el-input>
        <el-select
          v-else
          v-model="wePageUrl"
          placeholder="请输入微页面关键词"
          remote
          filterable
          clearable
          :loading="loading"
          :filter-method="getWePageAsync"
          style="width:100%;">
          <el-option v-for="item,n in wePageList.list" :value="item.microPageUrl" :label="item.title" :key="n.toString()"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="按钮">
        <el-select v-model="data.shadow">
          <el-option :value="1" label="阴影打开"></el-option>
          <el-option :value="0" label="阴影关闭"></el-option>
        </el-select>
        <el-select v-model="data.size">
          <el-option value="small" label="小">小</el-option>
          <el-option value="medium" label="中">中</el-option>
          <el-option value="big" label="大">大</el-option>
        </el-select>
        <el-color-picker v-model="data.background"></el-color-picker>
      </el-form-item>
      <el-form-item label="边框">
        <el-select v-model="data.borderRadius">
          <el-option :value="1" label="圆角打开"></el-option>
          <el-option :value="0" label="圆角关闭"></el-option>
        </el-select>
        <el-input-number v-model="data.borderWidth" :min="0" :max="5"></el-input-number>
        <el-color-picker v-model="data.borderColor"></el-color-picker>
      </el-form-item>
      <el-form-item label="字体">
        <el-select v-model="data.fontFamily">
          <el-option value="microsoft-yahei" label="微软雅黑"></el-option>
          <el-option value="SimHei" label="黑体"></el-option>
          <el-option value="SimSun" label="宋体"></el-option>
          <el-option value="KaiTi" label="楷体"></el-option>
          <el-option value="STHeiti" label="华文黑体"></el-option>
        </el-select>
        <el-input-number v-model="data.fontSize" :min="12" :max="24"></el-input-number>
        <el-checkbox-button v-model="data.fontWeight" true-label="700" false-label="500">粗体</el-checkbox-button>
        <el-color-picker v-model="data.fontColor"></el-color-picker>
      </el-form-item>
      <el-form-item label="布局">
        <el-radio-group v-model="data.align">
          <el-radio label="left">左</el-radio>
          <el-radio label="center">中</el-radio>
          <el-radio label="right">右</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import {mapActions, mapState} from 'vuex'
  export default {
    props: ['data'],
    data () {
      return {
        url: null,
        wePageUrl: '',
        loading: false
      }
    },
    mounted () {
      this.init()
    },
    watch: {
      url (newVal) {
        this.data.url = newVal
      },
      wePageUrl (newVal) {
        this.data.url = newVal
        const obj = this.wePageList.list.filter(item => item.microPageUrl === newVal)[0]
        this.data.wePage = obj.title
      }
    },
    computed: {
      ...mapState({
        wePageList: state => state.contentManage.wePageList
      })
    },
    methods: {
      ...mapActions(['getWePageList']),
      init () {
        if (this.data.wePage) {
          this.getWePageAsync(this.data.wePage)
          this.wePageUrl = this.data.url
        } else {
          this.getWePageAsync()
        }
      },
      getWePageAsync (query) {
        this.loading = true
        this.getWePageList({title: query, publishStatus: 1, page: 1, size: 10})
          .then(() => {
            this.loading = false
          })
      }
    }
  }
</script>
<style lang="scss">
  .we_btn_editor{
    .el-form{padding: 15px;}
    .el-form-item{margin-bottom:10px;}
    .el-select,.el-input-number{width:110px;vertical-align:top;}
    .el-checkbox-button{vertical-align:top;border-radius:5px;overflow:hidden;}
  }
</style>
